鉴于多级路由很麻烦，所以才用组件套用组件的方式来实现[后台登陆页]，[后台管理面板]内容。
<template>
  <div o_Container>
    <h1>{{ msg }}{{ text }}</h1>
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">{{oData.skinName}}</a>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Java
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">jmeter</a></li>
                <li><a href="#">EJB</a></li>
                <li><a href="#">Jasper Report</a></li>
                <li class="divider"></li>
                <li><a href="#">分离的链接</a></li>
                <li class="divider"></li>
                <li><a href="#">另一个分离的链接.</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <h2 class="bigTitle" v-on:click="testMeth()">Essential Links</h2>
    <ul>
      <li>
        <div>局部注册组件</div>
        <ltTestDemo v-bind:pdata="jsond" id="jubuCp" ref="ltSub" v-bind:todo="text">
        </ltTestDemo>
      </li>
      <li>
        <router-link to="/MT/776655">基础路由</router-link>
        <br/>
        <router-link :to="{ name: 'MarcoTest', params: { id: 123 }}">带参路由</router-link>
      </li>
      <li>
        <router-link to="/HOME/HomeProduct">进入子路由</router-link>
        <router-view/>
      </li>
      <li>
        <a href="https://twitter.com/vuejs"
           target="_blank">
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/"
           target="_blank">
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/"
           target="_blank">
          vue-router
        </a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/"
           target="_blank">
          vuex
        </a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/"
           target="_blank">
          vue-loader
        </a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue"
           target="_blank">
          awesome-vue
        </a>
      </li>
    </ul>
    <div id="div_Content_demo">
      此处是列表、编辑页测试原型
      <!--<o-item ref="it_user" v-bind:source="item.user"></o-item>-->
      <!--<o-list ref="lst_user" v-bind:source="list.user" v-bind:subFun="subMeth"-->
      <!--v-on:subsendfather="receiveChildData"></o-list>-->
      <!--<o-list ref="lst_user2" v-bind:source="list.order" v-bind:subFun="subMeth"-->
      <!--v-on:subsendfather="receiveChildData"></o-list>-->
      Index页面
      <router-link to="/MT/776655">基础路由</router-link>
      <router-link to="/">登录页路由</router-link>
      <div v-on:click="testMeth()">触发事件+刷新指定数据源</div>
      <button v-on:click="subMeth()" >Test Tips</button>
    </div>
  </div>
</template>


<!--<script src="/static/resource/script/component/jquery.js"></script>-->

<script>
  // 引用外部JS，里面加载需要用到的方法，实现了JS模块的复用。
  import {testFun, testFun2} from '../../src/assets/js/us.js'
  // import '../../src/assets/css/us.css'
  /* 引用子组件 */
  import listTemp from '../../src/components/ListTemplate.vue'

  export default {
    name: 'HelloWorld', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        item: {
          user: {
            data: {
              id: 3,
              value: 17,
              cellData: [{name: "Name"}, {name: "Password"}, {name: "CreateDate"}]
            },
            operation: {
              save: function (handle) {
                console.log("save: " + JSON.stringify(handle.data.value));
              }
            }
          }
        },
        list: {
          user: {
            // 配对后台八爪鱼框架
            data: {
              id: 1, // 测试MySQL
              cellData: [
                {
                  name: "Name",
                  width: 70,
                  searchKey: "like"
                },
                {
                  height: "999"
                },
                {
                  name: "AppCode",
                  width: 60
                },
                {
                  name: "CreateDate",
                  width: "222",
                  height: "200",
                  searchKey: "between",
                  //show: true,// 如果指定这个属性，则所有需要显示的列都需要显示标记
                  disabled: true,
                  minLength: 0,
                  maxLength: 500
                },
                {
                  name: "ID",
                  width: 100,
                  searchKey: "="
                }
              ],
            },
            // 前段操作事件回调
            operation: {
              create: function () {
                alert("create fun");
              },
              export: function (handle) {
                // 导出以后，回调这里给客户端操作。
                // 核心思想是cellData包含search数据（不管有没有），回传以后发送export指令，后台api会直接返回导出的数据提供下载。
                alert("export: get cell data is " + JSON.stringify(handle));
              },
              search: function (handle) {
                console.log("search: " + JSON.stringify(handle));
              },
              modify: function (key) {
                alert("modify key: " + key);
              },
              view: function (key) {
                alert("view key: " + key);
              },
              del: function (key) {
                alert("del key: " + key);
              },
              page: function (index) {
                console.log("page: " + index);
              }
            }
          },
          // 订单数据，测试用，结构和user差不多。
          order: {
            // 配对后台八爪鱼框架
            data: {
              id: 3,// 1：MySQL；2：MSSQL；3：Postgres；4：Oracle
              orderData: "\"ID\" ASC",
              cellData: [
                {
                  name: "Name",
                  searchKey: "like"
                },
                {
                  name: "Password",
                },
                {
                  name: "CreateDate",
                  width: "200"
                },
                {
                  name: "ID",
                  width: "100",
                  height: "200",
                  //show: false,// 如果指定这个属性，则所有需要显示的列都需要显示标记
                  disabled: true,
                  minLength: 0,
                  maxLength: 500,
                  searchKey: "="
                }
              ]
            },
            // 前段操作事件回调
            operation: {
              create: function () {

              }
            }
          }
        },
        msg: 'Welcome to GDSmart', /* 这里是数据，一定记住数据一定要放data中然后用return返回 */
        text: ' Platform',
        jsond: {id: "222mmm"},
      }
    },
    created:function(){
      console.log(ELEMENT);
    },
    methods: {
      testMeth: function () {
        testFun();
        testFun2("EEE", this.octopus);
        // 调用子组件自定义中的函数
        this.$refs.ltSub.$options.diyyy();
        // 调用子组件方法中的函数
        this.$refs.ltSub.ltDetailFun();
        // 调用子组件中的data中的数据
        console.log(this.$refs.ltSub.list);
        // 调用子组件方法中的remove方法。
        this.$refs.ltSub.remove();
        // 移除当前元素，不过是通过JQuery。
        //$("#jubuCp").remove();
      },
      subMeth: function () {
        $(".bigTitle").append("<div>1312312312312</div>");

        // ELEMENT.Message({
        //   showClose: true,
        //   message: "1313123",
        //   type: "success"
        // });
        //
        // alert("this is a subMeth.");
        this.octopus.tips.success("Tips 外挂成功。");
      },
      receiveChildData: function (data) {
        this.octopus.tips.debug("接收到子组件传来的数据：" + data);
      }
    },
    // 在Vue组建函数中注册组件需要通过这种方式注册
    components: {"ltTestDemo": listTemp},
    props: ["oData"]
  }

  // 可执行，但是还没掌握VUE的生命周期，获取不到元素对象。
  // testFun();
  // testFun2("GGG",this.a);

</script>

